<template>
     	<el-card class="registerCard animate__animated animate__flipInY "  key='register'  v-loading="loading" >
     		<div style="text-align:center;font-size: 13pt ;margin-bottom: 40px;" v-if="isRegister" >账号注册</div>
     		<div style="text-align:center;font-size: 13pt ;margin-bottom: 40px;" v-else>密码找回</div>
     		<el-form :model="emailForm" ref="emailForm" :rules="emailRules">
     			<el-row type="flex" align="middle" justify="center">
     				<el-col :span="20">
     					<el-form-item prop="id" >
     							<el-input prefix-icon="el-icon-user" v-model="emailForm.id"
     									style="margin-right: 5%;"    
     									placeholder="请输入邮箱" >
     							</el-input>
     					</el-form-item>
     				</el-col>
     			</el-row>
     		</el-form>
     		<el-form :model="RegisterForm" ref="RegisterForm" :rules="rules">
     			<el-row type="flex" align="middle" justify="center">
     				<el-col :span="20">
     					<el-form-item prop="code" >
     						<el-row>
     							<el-col :span="16">
     								<el-input v-model="RegisterForm.code"
     									style=""  
     									prefix-icon="el-icon-key"
     									placeholder="请输入验证码" >
     									</el-input>
     								
     							</el-col>
     							<el-col :span="3" :offset="2">
     								<el-button   icon="el-icon-s-promotion" style="background-color: #0eb9b4;color: #FFFFFF;" @click="getCode('emailForm',0)" v-if="!isGetCode&&isRegister"  v-loading="loading2">获取</el-button>
     								<el-button   icon="el-icon-s-promotion" style="background-color: #0eb9b4;color: #FFFFFF;" @click="getCode('emailForm',1)" v-if="!isGetCode&&!isRegister"  v-loading="loading2">获取</el-button>
     								<el-button type="info" disabled icon="el-icon-loading" v-if="isGetCode"  >{{time}}</el-button>
     								
     							</el-col>
     							<!-- <el-col></el-col> -->
     						</el-row>
     							
     							
     					</el-form-item>
     				</el-col>
     			</el-row>
     		
     			<el-row type="flex" align="middle" justify="center">
     				<el-col :span="20">
     					<el-form-item prop="pwdRegister" >
     						
     							<el-input prefix-icon="el-icon-lock" placeholder="请输入密码"  type="password" v-model="RegisterForm.pwdRegister" style="margin-right: 5%;"></el-input>
     					
     					</el-form-item>
     				</el-col>
     			</el-row>
     			<el-row type="flex" align="middle" justify="center">
     				<el-col :span="20">
     					<el-form-item prop="repeatPwd" >
     						<el-input prefix-icon="el-icon-lock" placeholder="请再次输入密码"  type="password" v-model="RegisterForm.repeatPwd" style="margin-right: 5%;"></el-input>
     						
     					</el-form-item>
     				</el-col>
     			</el-row>
     			<el-row type="flex" align="middle" justify="center" v-if="isRegister" >
     				<el-col :span="20">
     					<el-form-item prop="inviteCode" >
     						<el-input prefix-icon="el-icon-cpu" placeholder="请输入邀请码"  v-model="RegisterForm.inviteCode" style="margin-right: 5%;"></el-input>
     					</el-form-item>
     				</el-col>
     			</el-row>
     			<el-row type="flex" align="middle" justify="center">
					<el-col  :span="5" v-if="!isRegister" style="text-align: center;">
						<el-button type="info" style="margin-top: 20px;"  @click="goBack">返回</el-button>
					</el-col>
					<el-col :span="5" style="text-align: center;" v-if="!isRegister">
						<el-button type="success" style="margin-top: 20px;"  @click="updatePwd('RegisterForm')"  >确定</el-button>
					</el-col>
     				<el-col :span="20" style="text-align: center;" v-if="isRegister">
     					<el-button  style="width: 30%;margin-top: 20px;" type="primary" @click="register('RegisterForm')"  >注册</el-button>
     				</el-col>
     			</el-row>
     			
     			<el-row type="flex" align="middle" justify="center" v-if="isRegister" >
     				<el-col :span="20" style="text-align: center;">
     					<el-button style="width: 50%;margin-top: 15px;"  type="text" @click="setRes()">已有账号?点击登录</el-button>
     				</el-col>
     			</el-row>
     			<el-row type="flex" align="middle" justify="center">
     				<el-col :span="20" style="text-align: center;">
     					<el-button style="color: red;margin-top: 0px;"  type="text" @click="isRegister = ! isRegister"  v-if="isRegister" >忘记密码？</el-button>
     				</el-col>
     			</el-row>
     			
     			
     		</el-form>
     	</el-card>
</template>

<script>
	
	
export default {
	
    props:{
    	 id:{
    	        type:String,
				 default:""
    	    },
		isRegister:{
			type:Boolean,
			 default:true
		}
    },
   
    data:function () {
		
		var validatePass2 = (rule, value, callback) => {
			if (value === "") {
			callback(new Error('请再次输入密码'));
			} else if (value !== this.RegisterForm.pwdRegister) {
			callback(new Error('两次输入密码不一致!'));
			} else {
			callback();
			}
		};
        
		return{
			isGetCode:false,
			time:60,
			loading2:false,
			RegisterForm:{
				id: this.id,
				pwdRegister: "",
				repeatPwd: "",
				code:"",
				inviteCode:""
			},
			loading:false,
			emailForm:{
				id: this.id
			},
			emailRules:{
				id: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
					{ type:"email" ,message: '请输入正确邮箱格式', trigger: 'blur' }
				]
			},
			rules: {
				id: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
					{ type:"email" ,message: '请输入正确邮箱格式', trigger: 'blur' }
				],
				code:[
					
					{ required: true, message: '请输入验证码', trigger: 'blur' },
					{ min: 6, max: 6, message: '长度为 6 个字符', trigger: 'blur' }
					
				],
				inviteCode:[
					
					{ required: true, message: '请输入邀请码码', trigger: 'blur' },
					{ min: 8, max: 8, message: '长度为 8 个字符', trigger: 'blur' }
					
				],
				
				pwdRegister:[
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 8, max: 16 ,message: '长度为8-16个字符', trigger: 'blur' }
					],
				repeatPwd: [
					{ validator: validatePass2, trigger: 'blur' }
				]},
			}
	},
    
    mounted() {
    	if(this.isRegister){
			this.isGetCode=false
			this.time=60
			this.loading2=false
		}
    },
    methods:{
		goBack(){
			this.$emit("goBack")
			
		},
		setRes(){
			this.$emit("toLogin")
		},
		getCode(formName,arg = 0) {
			let _this = this
			  this.$refs[formName].validate(async (valid) => {
				if (valid) {
					this.loading2 = true;
					this.emailForm.id
					let res = await _this.text(this.$api.getRegCodeUser +arg+"?userId="+ this.emailForm.id)
					
					if(res.code === 200){
						this.$message({
							 message:'发送成功',
							 type: 'success',
						 })
						this.loading2 = false;
						this.isGetCode = true
							 let x = setInterval(() => {
							 		_this.time -= 1
							 	},1000);
							 setTimeout(() => {
							            _this.isGetCode = false
							 		   clearInterval(x)
									   _this.time = 60
							         },60000)
					}else{
						this.$message.error("请求失败或者接口返回失败！")
					}
			}
					
		});
		
		},
		async register(formName) {
			let _this = this
			await this.$refs[formName].validate( async (valid) => {
			if (valid) {
				this.loading = true;
					let postData = {
						id:_this.emailForm.id,
						pwd:_this.$md5(_this.RegisterForm.pwdRegister),
						code:_this.RegisterForm.code,
						inviteCode:_this.RegisterForm.inviteCode,
					}
					let res = await _this.text("user/register",postData,"post")
					
					if (res.code === 200) {
						this.$message({
							message: '注册成功',
							type: 'success'
							});
						_this.$GLOBAL.isLogin = true
						sessionStorage.setItem("isLogin", _this.$GLOBAL.isLogin);		
						_this.$GLOBAL.token = res.data.token
						sessionStorage.setItem("token", _this.$GLOBAL.token);	
						let userInfo = await _this.text("user/showSelf","","get")
						_this.$GLOBAL.userInfo = userInfo.data
						if (userInfo.data.perms >= 1) {
							_this.$GLOBAL.isInsider = true
							sessionStorage.setItem("isInsider", _this.$GLOBAL.isInsider);	
						}
						this.$router.push("information")
					}else{
						this.$message.error(res.data);
					} 
					this.loading = false;
			} else {
				this.$message.error('请输入数据');
				return false;
			}
			});            
		
		},
		updatePwd : async function(form){
			let _this = this
			await this.$refs[form].validate( async (valid) => {
				if (valid) {
					this.$confirm('确认保存？', '确认信息', {
						distinguishCancelAndClose: true,
						confirmButtonText: '确认',
						cancelButtonText: '取消'
					}).then(async () => {
						this.loading = true;
						
						let postData = {
							id:_this.emailForm.id,
							pwd:_this.$md5(_this.RegisterForm.pwdRegister),
							code:_this.RegisterForm.code
						}
						let res = await _this.text(_this.$api.modifyPwd,postData,"post")
						
						if (res.code === 500){
							this.$message.error('请求失败或者接口返回失败');
						}else if (res.code === 200) {
							this.$message({
								message: '修改成功',
								type: 'success'
								});
							this.$logOut()
							this.$router.push("login")
							this.isPrint = !this.isPrint
						}else if (res.code === 50013) {
							this.$message.error('新密码不能与旧密码一致')
						}
						
						this.setRes()
						this.loading = false;
					})
				} else {
					this.$message.error('请输入数据');
					return false;
				}
			});     
		},
           
    },
	created() {
		
	}
}
</script>

<style scoped>
  @import url("../assets/style/login.css");
</style>
